<template>
  <view class="scroll-view">
    <view class="content-wrap">
      <image :src="$wanlshop.oss(goodsData.image,750,1000)" mode="" class="topImg"></image>
      <view class="header">
        <view class="price-row">
          <view class="price-wrap">
            <view class="price">
              ¥<view style="font-size: 45rpx;">{{ goodsData.price }}</view>
            </view>
<!--            <view class="price-after">-->
<!--              券后¥-->
<!--              <view class="" style="font-size: 45rpx;">-->
<!--                {{ goodsData.interval_price }}-->
<!--              </view>-->
<!--            </view>-->
          </view>
<!--          <view class="salesNum">-->
<!--            已售{{ goodsData.sales }}-->
<!--          </view>-->
        </view>
        <view class="title-wrap">
          <view class="title">
            <view class="hot-wrap">
              <view class="hot good">
                <image :src="$wanlshop.oss('/011_wanlshop/image/good.png')" mode=""></image>
                <view class="z-1">
                  精选
                </view>
              </view>
              <view class="hot">
                <image :src="$wanlshop.oss('/011_wanlshop/image/hot.png')" mode=""></image>
                <view class="z-1">
                  热卖
                </view>
              </view>
            </view>
            {{ goodsData.title }}
          </view>
        </view>
      </view>

      <view class="order" @tap="scrollInTo">
        超值特惠，立即下单
      </view>

      <view class="detail-imgs">
        <rich-text :nodes="goodsData.content"></rich-text>
      </view>

      <view class="detail-wrap" id='detail'>
        <view class="address-wrap">
          <view class="address-title">
            <view class="">
              立即报名
            </view>
            <view class="wx">
<!--              <image src="@/static/imgs/detail/wx.png" mode="" class="wx-icon"></image>-->
              <!--								微信地址导入-->
<!--              <image src="../../static/imgs/detail/arrow-right.png" mode="" class="arrow"></image>-->
            </view>
          </view>
          <view class="address-item">
            <view class="address-name">
              姓名
            </view>
            <view class="address-content">

              <input type="text" placeholder="请输入姓名" class="address-input"
                     placeholder-class="placeholderClass" v-model="subData.name"
                     />
            </view>
          </view>
          <view class="address-item">
            <view class="address-name">
              手机号码
            </view>
            <view class="address-content">
              <input type="number" placeholder="请输入11位手机号" maxlength="11" class="address-input"
                     placeholder-class="placeholderClass"
                     v-model="subData.mobile" />
            </view>
          </view>
          <view class="address-item">
            <view class="address-name">
              人数
            </view>
            <view class="address-content">
              <input type="number" placeholder="报名人数" :min="1" :max="9999" maxlength="11" class="address-input"
                     placeholder-class="placeholderClass"
                     v-model="subData.number" />
            </view>
          </view>
          <view class="project-wrap">
            <view class="project-content">
              <view class="project-name">
                <image src="../../static/imgs/detail/shield-suc.png" mode=""></image>
                购物保障
              </view>
              <view class="project-in">
                保护中
                <image src="../../static/imgs/detail/in.png" mode=""></image>
              </view>
            </view>
            <view class="project-des">
              保障您的个人隐私信息安全，您的信息仅用于为您提供服务或改善服务体验，勾选即同意<text>《个人信息说明》</text>
            </view>
          </view>

          <view class="submit" @click="NewSubmitData">
            提交订单 ￥{{ (Number(goodsData.price) * Number(subData.number)).toFixed(2) }}
          </view>

          <view class="footer">
            商家：{{ goodsData.shopname }}｜友邻科技仅提供技术支持
          </view>
        </view>
      </view>
    </view>
    <view class="first-wrap" v-if="flag">
      <image src="../../static/imgs/detail/first.png" mode="" class="bg"></image>
      <view class="first-content z-1" @click="scrollInTo">
        <image src="../../static/imgs/detail/first-icon.png" mode=""></image>
        点我报名，立即下单
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "goods",
  data() {
    return {
      flag:true,
      detailHeight: 0,
      windowHeight: 0,

      goodsData:{},
      subData:{
        name: '',
        number: 1,
        mobile: '',
      },
    }
  },
  onLoad(option) {
    var self = this
    // 保存clickid
    if (option.clickid) {
      uni.setStorageSync('clickid', option.clickid);
    }
    if (option.bxmid) {
      uni.setStorageSync('bxmid', option.bxmid);
    }
    if (option.bxm_id) {
      uni.setStorageSync('bxmid', option.bxm_id);
    }
    if (option.event_type) {
      uni.setStorageSync('event_type', option.event_type);
    }
    uni.getSystemInfo({
      success: function(res) {
        self.windowHeight = res.windowHeight
        // console.log(res.appName)
      }
    });
    // var res = {
    //   image: '/uploads/20231025/21ca51cb322cecc956c869c1942d3e54.png',
    //   title: '【限时特惠】重庆旅游洪崖洞飞猪李子坝仙女山磁器口天生三桥乌江5天4晚跟团游',
    //   shopname: '春官',
    //   price: 599,
    //   content: '<p><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/b5d5599c3ab053b17a446ce9c2ec6e12.png" width="1080" height="1034"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/26136753e7e1327bf72518718c6e09bc.png" width="1000" height="1000"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/86a578832b9408aa3263caeef053b0bc.png" width="800" height="1028"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/6566a442bd68c7607fb5c9d54ed60284.png" width="800" height="900"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/4d3e5473e6ee040dee51f9375b41e50f.png" width="1024" height="1024"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/4d23006d9aef763d03265bf26432547e.png" width="1000" height="1000"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/cb096014a1d9e4206d1871dd7d227de3.png" width="1080" height="1066"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/bbe90b8d2e5329fdd9ef7d274eed832b.png" width="1061" height="1080"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/095b516dc49c7671bbd062198b051589.png" width="800" height="1044"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/3af44826523725e065f9d532a0f5d13e.png" width="800" height="975"><img alt="image.png" src="https://cdn.enjoysix.com/uploads/20231022/392dd583fc4331c79d9412788da89621.png" width="1000" height="1000"><br></p>'
    // }
    // res.content = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
    //     match, capture) => {
    //   var img =
    //       `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
    //   return img;
    // });
    // this.goodsData = res
    this.loadData(option);

    setTimeout(()=>{
      self.getDetailHeight()
    },1000)
  },
  onPageScroll(e){
    console.log(e.scrollTop)
    console.log(this.detailHeight)
    this.flag = e.scrollTop < this.detailHeight  - this.windowHeight
  },
  methods:{
    async loadData(option) {
      var self = this
      //加载商品
      await uni.request({
        url: '/tourism/order/shop',
        data: option,
        success: res => {
          console.log(res)
          if (res.statusCode === 200){
            self.goodsData = {
              id:res.data.id,
              image: res.data.thumbnail,
              title: res.data.title,
              shopname: res.data.merchant_name,
              market_price: res.data.market_price,
              price: res.data.price,
              content : res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
                  match, capture) => {
                var img =
                    `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
                return img;
              })
            }
          }
        }
      })
    },
    scrollInTo() {
      uni.pageScrollTo({
        selector:'#detail'
      })
    },
    //获取支付页的高度
    getDetailHeight() {
      var self = this
      let query = uni.createSelectorQuery();
      query.select('#detail').boundingClientRect(data => {
        self.detailHeight = data.top
        console.log(data)
        console.log(self.detailHeight)
        // 这个
      }).exec();
      console.log(this.detailHeight)
    },
    NewSubmitData(){
      var self = this
      let data = this.subData
      if (!data.name){
        this.$wanlshop.msg('请输入姓名');
        return;
      }
      if (!data.mobile){
        this.$wanlshop.msg('请输入手机号码');
        return;
      }
      if (!data.number){
        this.$wanlshop.msg('请输入人数');
        return;
      }
      if (data.number<=0){
        this.$wanlshop.msg('报名人数不可少于1人');
        return;
      }
      if (!/^1[0-9]{10,10}$/.test(data.mobile)) {
        this.$wanlshop.msg('请输入正确的手机号码');
        return;
      }
      var event = ''
      if (uni.getStorageSync('clickid')){
        event = 'clickid' + uni.getStorageSync('clickid')
      }
      if (uni.getStorageSync('bxmid')){
        event = 'bxmid' + uni.getStorageSync('bxmid')
      }

      uni.login({
        provider: 'weixin', //使用微信登录
        success: function(loginRes) {
          uni.request({
            url: '/tourism/order/add',
            method: 'POST',
            data: {
              event: event,
              code: loginRes.code,
              id:self.goodsData.id,
              phone:self.subData.mobile,
              name:self.subData.name,
              num:self.subData.number,
            },
            success: res => {
              uni.requestPayment({
                appId: res.data.appId,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                paySign: res.data.paySign,
                signType: res.data.signType,
                timeStamp: res.data.timeStamp,
                success: (e) => {
                  self.paySuccess();
                },
                fail: (e) => {
                  uni.showModal({
                    content: "支付失败,原因为: " + e.errMsg,
                    showCancel: false
                  })
                }
              })
            }
          });
        }
      });
    },
    paySuccess(){
      this.$wanlshop.msg('支付成功');
      if (uni.getStorageSync('clickid')){
        this.sendtoTaq();
      }
      if (uni.getStorageSync('bxmid')){
        this.sendtoTaqbxm();
      }
    },
    sendtoTaq:function () {
      uni.request({
        method:'POST',
        url: 'https://analytics.oceanengine.com/api/v2/conversion',
        header: {},
        data: {
          "event_type": uni.getStorageSync('event_type'),
          "context": {
            "ad": {
              "callback": uni.getStorageSync('clickid'),//callback 这里需要填写的就是从启动参数里获取的 clickid
            }
          },
          "timestamp": new Date().getTime()
        },
        success: function(res) {
          console.log('++++++++++ success   ++++++++++++++++')
          console.log(JSON.stringify(res.data))
          uni.removeStorageSync('clickid')
          uni.removeStorageSync('event_type')
        },
        error: function(err) {
          console.log('++++++++++ error   ++++++++++++++++')
          console.log(JSON.stringify(err))
        },
        finally: function(res) {
          console.log('++++++++++ finally   ++++++++++++++++')
        }
      })
    },
    sendtoTaqbxm:function () {
      var self = this;
      uni.request({
        method:'GET',
        url: 'https://openlog.bianxianmao.com/inads/s.gif',
        header: {},
        data: {
          mt:8,
          bxmid:uni.getStorageSync('bxmid'),
          conversion_type:uni.getStorageSync('event_type'),
          pay_amount:(Number(self.goodsData.price) * Number(self.subData.number)).toFixed(2),
          phone_num:self.subData.mobile,
        },
        success: function(res) {
          console.log('++++++++++ success   ++++++++++++++++')
          console.log(JSON.stringify(res.data))
          uni.removeStorageSync('bxmid')
          uni.removeStorageSync('event_type')
        },
        error: function(err) {
          console.log('++++++++++ error   ++++++++++++++++')
          console.log(JSON.stringify(err))
        },
        finally: function(res) {
          console.log('++++++++++ finally   ++++++++++++++++')
        }
      })
    },
  }
}
</script>

<style lang="scss">
.scroll-view {
  position: relative;
  width: 100%;
  height: 100vh;
}
.content-wrap {
  padding-bottom: 100rpx;
}
.topImg {
  width: 750rpx;
  height: 1000rpx;
}

.header {
  background: #fff;
  padding: 24rpx 30rpx 0;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-wrap {
  display: flex;
}

.price {
  font-size: 28rpx;
  font-weight: bold;
  color: #F83D2A;
  line-height: 60rpx;

  view {
    display: inline-block;
    font-size: 52rpx
  }
}

.price-after {
  margin-left: 26rpx;
  padding: 0 20rpx;
  height: 62rpx;
  background: #F83D2A;
  border-radius: 32rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 34rpx;
  text-align: center;
  box-sizing: border-box;
  line-height: 60rpx;

  view {
    display: inline-block;
    font-size: 50rpx;
    font-weight: bold;
    color: #FFFFFF;

  }

}

.salesNum {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #676767;
  line-height: 34rpx;
}

.title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22rpx 0 18rpx;
  border-bottom: 2rpx solid #f1f1ff;
}
.title {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1C1C1C;
  line-height: 44rpx;
}
.hot-wrap {
  display: inline-block;
  vertical-align: middle;
  height: 44rpx;
}
.hot {
  margin-right: 10rpx;
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 56rpx;
  height: 34rpx;
  text-align: center;
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 34rpx;

  image {
    position: absolute;
    left: 0;
    top: 0;
    width: 56rpx;
    height: 34rpx;

  }
}

.share {
  display: flex;
  align-items: center;
  padding: 0 6rpx 0 12rpx;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.info-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 25rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  height: 72rpx;
  line-height: 34rpx;
}
.shield-wrap {
  display: flex;
  align-items: center;
}

.shield-text {
  color: #6B6B6B;
}

.shield-icon {
  margin: 0 18rpx 0 26rpx;
  width: 24rpx;
  height: 30rpx;
}

.shield-content {
  color: #26201F;
}

.arrow-right {
  width: 12rpx;
  height: 24rpx;
}


.coupon-wrap {
  margin: 22rpx auto 0;
  position: relative;
  width: 712rpx;
  height: 130rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx 0 22rpx;
  box-sizing: border-box;
}
.coupon-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 712rpx;
  height: 130rpx;
}

.coupon-left {
  display: flex;
  align-items: center;

  .price {
    font-size: 36rpx;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #FE3C24;
    line-height: 54rpx;

    view {
      display: inline-block;
      font-size: 54rpx;
    }
  }

  .coupon-left-content {
    margin-left: 14rpx;

    .name {
      width: 420rpx;
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #26201F;
      line-height: 36rpx;
    }

    .content {
      width: 420rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6E6264;
      line-height: 34rpx;
    }
  }
}

.coupon-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110rpx;
  height: 54rpx;
  border-radius: 28rpx;
  border: 2rpx solid #F83D2A;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #F83D2A;
  line-height: 36rpx;
}

.order {
  margin: 20rpx auto 0;
  width: 692rpx;
  height: 88rpx;
  background: #E25740;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evaluate-wrap {
  margin-top: 46rpx;
  padding: 20rpx 30rpx 2rpx 26rpx;
  background: #fff;

  .evaluate-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-num {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #242424;
      line-height: 44rpx;
    }

    .more {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #B1B1B1;
      line-height: 34rpx;

      .more-icon {
        margin-left: 22rpx;
        width: 14rpx;
        height: 24rpx;
      }
    }
  }

  .evaluate-list {
    padding-top: 26rpx;

    .evaluate-item {
      padding-bottom: 30rpx;

      &-avatar {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #232323;
        line-height: 40rpx;

        image {
          margin-right: 8rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
        }
      }

      &-content {
        margin-top: 10rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #232323;
        line-height: 40rpx;
      }
    }
  }
}

.shop-wrap {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  height: 156rpx;
  background: #FFFFFF;
  padding: 0 30rpx 0 26rpx;

  .shop-avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
  }

  .shop-content {
    margin-left: 26rpx;
    flex: 1;

    &-name {
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #232323;
      line-height: 44rpx;
    }

    .authentication {
      margin-top: 10rpx;
      width: 154rpx;
      height: 44rpx;
    }
  }

  .toShop {
    width: 148rpx;
    height: 62rpx;

    border: 1px solid #D45C41;
    border-radius: 4rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #D45C41;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.detail-imgs {
  margin-top: 22rpx;

  image {
    width: 100%;
    height: auto;
  }
}

.detail-wrap {
  margin-top: 24rpx;
  padding: 26rpx 0 0 0;

  .detail-header {
    position: relative;
    display: flex;
    padding-bottom: 30rpx;
    background: #fff;
    padding: 0 14rpx 0 30rpx;

    .shop-img {
      width: 196rpx;
      height: 196rpx;
      border-radius: 10rpx;
    }

    .detail-header-content {
      flex: 1;
      margin-left: 20rpx;

      .detail-header-title {
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1C1C1C;
        line-height: 42rpx;

        .brand-wrap {
          display: inline-block;
          vertical-align: bottom;


          .brand {
            margin-right: 10rpx;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            width: 56rpx;
            height: 34rpx;
            text-align: center;
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 34rpx;
            background: #454545;

          }
        }

      }

      .tabs-wrap {
        margin-top: 14rpx;
        display: flex;

        .tabs-item {
          margin-right: 10rpx;
          width: 120rpx;
          height: 42rpx;
          border-radius: 4rpx;
          border: 2rpx solid #DC4C2A;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #DC4C2A;
          line-height: 36rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }

      .detail-header-price-wrap {
        margin-top: 20rpx;

        view {
          display: inline-block;
        }

        .price-tip {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1C1C1C;
          line-height: 34rpx;
        }

        .detail-header-price {
          margin-left: 8rpx;
          font-size: 36rpx;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #F83D2A;
          line-height: 42rpx;

          view {
            margin-left: 2rpx;
            font-size: 52rpx;
          }
        }
      }
    }
  }

  .specifications-wrap {

    padding: 0 30rpx;
    background: #fff;

    .specifications-content {
      padding: 28rpx 0 30rpx 0;
      border-top: 1rpx solid #EEEEEE;
    }

    .specifications-title {
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1C1C1C;
      line-height: 44rpx;
    }

    .specifications-list {
      padding-top: 10rpx;

      .specifications-item {
        margin-top: 22rpx;
        min-height: 66rpx;
        width: 666rpx;
        background: #F1F1F1;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1C1C1C;
        line-height: 40rpx;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2rpx solid#F1F1F1;
      }

      .specifications-item-ac {
        background: #FFF5F4;
        border: 2rpx solid #DD4A27;
        color: #F83D2A;


      }
    }
  }

  .num-wrap {

    padding: 0 30rpx;
    background: #fff;

    .num-content {
      border-top: 1rpx solid #EEEEEE;
      display: flex;
      align-items: center;
      justify-content: space-between;

      height: 126rpx;

    }

    .num-text {
      font-size: 36rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1C1C1C;
      line-height: 50rpx;
    }

    .num-action {
      display: flex;
      align-items: center;

      .reduce,
      .add,
      .num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64rpx;
        height: 64rpx;
        background: #F7F8FA;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1C1C1C;
        line-height: 40rpx;
      }

      .num {
        margin: 0 8rpx;
        background: #F4F4F6;
      }

      .active {
        background: #FBFBFB;
        color: #E2E2E2;
      }
    }


  }

  .address-wrap {
    margin-top: 18rpx;
    background: #fff;

    .address-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      height: 96rpx;
      font-size: 36rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1C1C1C;
      line-height: 50rpx;

      .wx {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 400;
        color: #57C057;
        line-height: 44rpx;

        .wx-icon {
          margin-right: 8rpx;
          width: 40rpx;
          height: 40rpx;
        }

        .arrow {
          margin-left: 24rpx;
          width: 12rpx;
          height: 24rpx;

        }

      }
    }

    .address-item {
      border-top: 1rpx solid #EEEEEE;
      display: flex;
      align-items: center;
      height: 92rpx;

      .address-name {
        width: 182rpx;
        padding-left: 30rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1C1C1C;
        line-height: 44rpx;
      }

      .address-content {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 44rpx;
        flex: 1;
        padding-right: 30rpx;

        .address-input {
          width: 100%;
          font-size: 32rpx;
          font-weight: 400;
        }


      }

      .address-content-ac {
        color: #000;
      }
    }
  }

  .pay-wrap {
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background: #FFFFFF;
    padding: 0 36rpx 0 34rpx;

    .pay-name {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1C1C1C;
      line-height: 44rpx;

      image {
        margin-right: 10rpx;
        width: 42rpx;
        height: 34rpx;
      }
    }

    .check {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .payInfo-wrap {
    margin-top: 20rpx;
    background: #fff;

    .payInfo-item {
      border-bottom: 1rpx solid #EEEEEE;
      padding: 0 26rpx 0 30rpx;
      height: 92rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .payInfo-name {
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1C1C1C;
        line-height: 44rpx;
      }

      .payInfo-content {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1C1C1C;
        line-height: 44rpx;

        .arrow {
          margin-left: 24rpx;
          width: 12rpx;
          height: 22rpx;
        }
      }


    }

    .payInfo-coupon {
      color: #D45F3E;
    }

    .payInfo-item:last-child {
      border: none;
    }
  }

  .remark-wrap {
    margin-top: 22rpx;
    background: #fff;
    display: flex;
    align-items: center;
    height: 100rpx;
    padding: 0 30rpx;

    .remark-name {
      font-size: 32rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1C1C1C;
      line-height: 44rpx;
    }

    .remark-content {
      flex: 1;
      margin-left: 26rpx;

      .remark-input {
        font-size: 32rpx;
      }
    }
  }

  .project-wrap {
    padding: 48rpx 26rpx 0 34rpx;

    .project-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .project-name {
        display: flex;
        align-items: center;
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1C1C1C;
        line-height: 48rpx;

        image {
          margin-right: 18rpx;
          width: 38rpx;
          height: 46rpx;
        }
      }

      .project-in {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1C1C1C;
        line-height: 44rpx;

        image {
          margin-left: 12rpx;
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
        }
      }

    }

    .project-des {
      margin-top: 30rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #828282;
      line-height: 40rpx;

      text {
        color: #477FED;
      }
    }
  }

  .submit {
    margin: 106rpx auto 0;
    width: 640rpx;
    height: 96rpx;
    background: #DB5647;
    border-radius: 48rpx;
    font-size: 34rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .footer {
    text-align: center;
    margin-top: 30rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #515151;
    line-height: 34rpx
  }
}

.z-1{
  position: relative;
  z-index: 1;
}

.first-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  background: #f1f1f1;
  z-index: 10;

  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 110rpx;
  }

  .first-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 110rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 42rpx;

    image {
      margin-right: 6rpx;
      width: 48rpx;
      height: 60rpx;
    }
  }
}
</style>